<template>
  <div>
    <vue-anka-cropper
      :options="{
        aspectRatio: aspectRatio,
        closeOnSave: closeOnSave,
        cropArea: cropArea,
        croppedHeight: 400,
        croppedWidth: 400,
        cropperHeight: false,
        dropareaMessage: dropareaMessage,
        frameLineDash: [5,3],
        frameStrokeColor: 'rgba(255, 255, 255, 0.8)',
        handleFillColor: 'rgba(255, 255, 255, 0.2)',
        handleHoverFillColor: 'rgba(255, 255, 255, 0.4)',
        handleHoverStrokeColor: 'rgba(255, 255, 255, 1)',
        handleSize: 10,
        handleStrokeColor: 'rgba(255, 255, 255, 0.8)',
        layoutBreakpoint: 850,
        maxCropperHeight: 768,
        maxFileSize: maxFileSize,
        overlayFill: 'rgba(0, 0, 0, 0.5)',
        previewOnDrag: previewOnDrag,
        previewQuality: 0.65,
        resultQuality: 0.8,
        resultMimeType: resultMimeType,
        selectButtonLabel: selectButtonLabel,
        showPreview: showPreview,
        skin: 'light',
        uploadData: data,
        uploadTo: url
      }"
      @cropper-error="onError(errorMessage)"
      @cropper-file-selected="onSelected(file)"
      @cropper-preview="onPreview(imageSource)"
      @cropper-saved="onSaved(cropData)"
      @cropper-cancelled="onCancelled"
      @cropper-uploaded="onUploade(serverResponse)"
      @cropper-mounted="onMounted"
    />
  </div>
</template>

<script>
import vueAnkaCropper from 'vue-anka-cropper'
export default {
  name: 'CropperDemo',
  components: { vueAnkaCropper },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    resultMimeType: {
      type: String,
      default: 'image/jpeg'
    },
    url: {
      type: String,
      default: ''
    },
    showPreview: {
      type: Boolean,
      default: true
    },
    selectButtonLabel: {
      type: String,
      default: '选择图片'
    },
    previewOnDrag: {
      type: Boolean,
      default: true
    },
    maxFileSize: {
      type: Number,
      default: 8000000
    },
    dropareaMessage: {
      type: String,
      default: '拖拽到此上传'
    },
    closeOnSave: {
      type: Boolean,
      default: true
    },
    aspectRatio: {
      type: Number,
      default: 1
    },
    cropArea: { // 'box' or 'circle'
      type: String,
      default: 'box'
    }
  },
  methods: {
    someAction(errorMessage) {
      this.$emit('onError', errorMessage)
    },
    onSelected(file) {
      this.$emit('onSelected', file)
    },
    onPreview(imageSource) {
      this.$emit('onPreview', imageSource)
    },
    onSaved(cropData) {
      this.$emit('onSaved', cropData)
    },
    onUploade(serverResponse) {
      this.$emit('onUploade', serverResponse)
    },
    onMounted() {
      this.$emit('onMounted')
    },
    onCancelled() {
      this.$emit('onCancelled')
    }
  }
}
</script>

<style lang="scss" scoped>
.ankaCropper.dark {
  background: #0f1114;
  color: #eee;
}
.ankaCropper.dark .ankaCropper__droparea {
  border: 2px dashed #3e424b
}
.ankaCropper.dark .ankaCropper__saveButton,
.ankaCropper.dark .ankaCropper__selectButton {
  background: #334f90;
  color: #fff;
}
.ankaCropper.dark .ankaCropper__saveButton:hover,
.ankaCropper.dark .ankaCropper__selectButton:hover {
  background: #335dbe;
}
.ankaCropper.dark .ankaCropper__navigation {
  background: #1d2227;
}
.ankaCropper.dark .ankaCropper__navButton {
  background: #272c31;
}
.ankaCropper.dark .ankaCropper__navButton svg {
  stroke: #eee
}
.ankaCropper.dark .ankaCropper__navButton:hover {
  background: #000;
}
</style>
